<template>
  <div class="portfolio-page py-10">
    <div class="container">
      <!-- 页面标题 -->
      <PageHeader
        title="作品集"
        subtitle="这里展示了我的设计和开发作品，涵盖网站开发、移动应用和UI/UX设计"
      />

      <!-- 作品分类 -->
      <section class="mb-8 animate__animated animate__fadeIn">
        <CategoryFilter
          v-model="activeCategory"
          :categories="categories"
          all-label="全部作品"
          :centered="true"
        />
      </section>

      <!-- 作品展示 -->
      <section class="mb-16">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <ProjectCard
            v-for="(project, index) in filteredProjects"
            :key="project.id"
            :project="project"
            :index="index"
          />
        </div>
      </section>

      <!-- 联系信息 -->
      <section class="animate__animated animate__fadeIn">
        <div class="bg-bg-secondary rounded-lg p-8 text-center">
          <h2 class="text-2xl font-bold mb-4 text-text-primary">
            对我的作品感兴趣？
          </h2>
          <p class="text-text-secondary mb-6">
            欢迎联系我讨论合作或了解更多作品详情
          </p>
          <n-button
            type="primary"
            size="large"
            tag="a"
            href="mailto:contact@example.com"
          >
            联系我
          </n-button>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { EyeOutline, LogoGithub } from "@vicons/ionicons5";

// 作品分类
const categories = [
  { label: "网站开发", value: "web" },
  { label: "移动应用", value: "mobile" },
  { label: "UI/UX设计", value: "design" },
];

// 当前选中的分类
const activeCategory = ref("all");

// 模拟项目数据
const projects = [
  {
    id: 1,
    title: "个人博客网站",
    description:
      "基于Nuxt 3构建的个人博客和作品展示网站，支持深色模式和自定义主题色。",
    image: "https://picsum.photos/seed/project1/600/400",
    category: "网站开发",
    categoryValue: "web",
    technologies: ["Nuxt", "Vue", "UnoCSS", "Naive UI"],
    demoUrl: "https://example.com/demo/blog",
    githubUrl: "https://github.com/example/personal-blog",
  },
  {
    id: 2,
    title: "电子商务平台",
    description:
      "全功能电子商务网站，包括产品展示、购物车、支付集成和用户管理系统。",
    image: "https://picsum.photos/seed/project2/600/400",
    category: "网站开发",
    categoryValue: "web",
    technologies: ["React", "Next.js", "Tailwind CSS", "Stripe"],
    demoUrl: "https://example.com/demo/ecommerce",
    githubUrl: "https://github.com/example/ecommerce",
  },
  {
    id: 3,
    title: "健康追踪应用",
    description:
      "用于追踪健身活动和饮食习惯的移动应用，支持数据可视化和目标设定。",
    image: "https://picsum.photos/seed/project3/600/400",
    category: "移动应用",
    categoryValue: "mobile",
    technologies: ["React Native", "Firebase", "Redux", "Chart.js"],
    demoUrl: "https://example.com/demo/health-app",
    githubUrl: "https://github.com/example/health-tracker",
  },
  {
    id: 4,
    title: "旅行计划助手",
    description:
      "帮助用户规划旅行行程、预算和目的地的移动应用，集成地图和旅行推荐。",
    image: "https://picsum.photos/seed/project4/600/400",
    category: "移动应用",
    categoryValue: "mobile",
    technologies: ["Flutter", "Dart", "Google Maps API", "Firebase"],
    demoUrl: "https://example.com/demo/travel-app",
    githubUrl: "https://github.com/example/travel-planner",
  },
  {
    id: 5,
    title: "金融仪表盘界面设计",
    description:
      "为金融分析应用设计的用户界面，包括数据可视化、用户体验流程和交互原型。",
    image: "https://picsum.photos/seed/project5/600/400",
    category: "UI/UX设计",
    categoryValue: "design",
    technologies: ["Figma", "Adobe XD", "Sketch", "Prototyping"],
    demoUrl: "https://example.com/demo/finance-ui",
    githubUrl: null,
  },
  {
    id: 6,
    title: "社交媒体应用界面",
    description:
      "现代化社交媒体应用的用户界面设计，注重用户体验和视觉层次结构。",
    image: "https://picsum.photos/seed/project6/600/400",
    category: "UI/UX设计",
    categoryValue: "design",
    technologies: ["Adobe XD", "Illustrator", "Usability Testing"],
    demoUrl: "https://example.com/demo/social-ui",
    githubUrl: null,
  },
  {
    id: 7,
    title: "天气预报应用",
    description:
      "提供实时天气更新和预报的响应式网络应用，支持多位置跟踪和通知。",
    image: "https://picsum.photos/seed/project7/600/400",
    category: "网站开发",
    categoryValue: "web",
    technologies: ["JavaScript", "Vue", "Weather API", "Progressive Web App"],
    demoUrl: "https://example.com/demo/weather",
    githubUrl: "https://github.com/example/weather-app",
  },
  {
    id: 8,
    title: "任务管理系统",
    description:
      "团队协作的任务管理应用，具有看板视图、任务分配和进度跟踪功能。",
    image: "https://picsum.photos/seed/project8/600/400",
    category: "网站开发",
    categoryValue: "web",
    technologies: ["TypeScript", "Angular", "Node.js", "MongoDB"],
    demoUrl: "https://example.com/demo/task-manager",
    githubUrl: "https://github.com/example/task-management",
  },
  {
    id: 9,
    title: "音乐流媒体应用",
    description:
      "用于音乐发现和流媒体的移动应用，包括播放列表创建和社交共享功能。",
    image: "https://picsum.photos/seed/project9/600/400",
    category: "移动应用",
    categoryValue: "mobile",
    technologies: ["Swift", "UIKit", "Core Audio", "RESTful APIs"],
    demoUrl: "https://example.com/demo/music-app",
    githubUrl: "https://github.com/example/music-streaming",
  },
];

// 根据分类过滤项目
const filteredProjects = computed(() => {
  if (activeCategory.value === "all") {
    return projects;
  }
  return projects.filter((p) => p.categoryValue === activeCategory.value);
});

// 设置当前分类
const setCategory = (category: string) => {
  activeCategory.value = category;
};

// 设置页面标题
useHead({
  title: "作品集 - 个人网站",
  meta: [
    {
      name: "description",
      content:
        "这里展示了我的设计和开发作品，涵盖网站开发、移动应用和UI/UX设计",
    },
  ],
});

// 定义页面过渡
definePageMeta({
  pageTransition: {
    name: "page",
    mode: "out-in",
  },
});
</script>
